<template>
  <header>
    <div class="header-left">
      <div class="iconfont back-icon">&#xe685;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe67d;</span>
      输入城市/景点/游玩主题
    </div>
    <router-link to="/city" tag="div">
      <div class="header-right">
        {{this.city}}
        <span class="iconfont">&#xe665;</span>
      </div>
    </router-link>
  </header>
</template>

<script>
import {mapState} from 'vuex';
export default {
  name: "Header",
  computed:{
    ...mapState(['city'])//数组对象都可以使用 list使用对象
  }
};

/*没有等比例所有 就是没有动态的只有写死的50pxhtml大小
 1rem => html fonz-size = 50px  设计稿750px 2倍图 写px单位的时候要缩小2倍放在手机上 所以设计稿写86px的 => 写43px 之后 转成rem
86/100 现在是1rem = 50px 二者的倍数都×2倍去 不然那就写43px / 50px 了 这里好计算而已 直接去掉二位数
设计稿是750像素的 按照750px写就好 有个文件会做适配 正常不同屏幕下不同的html大小
这里750屏幕尺寸/15 = 50px   页面元素在750像素下的px值/html文字大小 = 86/50px = 1.72 
设置的基准值是 375屏幕尺寸/15 = 25px     页面元素在375像素下的px值 / html文字大小 = 43/25 = 1.72 
这里做了个适配 86/50px 这里的86px 默认是在750屏幕下面开发的
所以这里做了适配后 375px下的时候 html文字大小就是25  750px下的时候就是 50px
1rem = 50px  直接以 750px为基准元素px值 / 文字大小即可  
375px 的时候会适配  750px下的px值会缩小2倍的 / 文字大小也缩小倍 25px  
这就是为啥  750尺寸下的86px  =>转到375尺寸下的变成 43px了 
rem = 页面元素在多少屏幕尺寸下的px值 / html文字大小   750 /375 2倍关系  公式不难算出 
1.72rem * 25px = 375尺寸下的  43px
1.72rem * 50px = 750尺寸下的  86px
*/
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

header {
  display: flex;
  line-height: $headerHeight;
  background: $bgColor;
  color: #fff;

  .header-left {
    width: 1.28rem;
    float: left;

    .back-icon {
      text-align: center;
      font-size: 0.8rem;
    }
  }

  .header-input {
    flex: 1;
    height: 1.28rem;
    line-height: 1.28rem;
    margin-top: 0.24rem;
    margin-left: 0.4rem;
    padding-left: 0.4rem;
    background: #fff;
    border-radius: 0.2rem;
    color: #ccc;
  }

  .header-right {
    min-width: 2.08rem;
    padding: 0 0.2rem;
    float: right;
    text-align: center;
    color: #fff;
  }
}
</style>
